<template>
	<view class="page">
		<u-navbar title="联系客服" leftIconColor='#fff' titleStyle='color:#fff;' @rightClick="rightClick"
			bgColor='transparent' :autoBack="true"></u-navbar>
		<view class="con" :style="{paddingTop:pt+'px'}">
			<image class="title" src="./static/kftbg.png" mode=""></image>
			<view class="flex" style="justify-content: center;">
				<view class="tabbox flex">
					<view @click="curi=index" class="tabitem" :class="curi==index?'active'+(curi+1):''"
						v-for="(item,index) in tablist" :key="index">
						{{item}}
					</view>
				</view>
			</view>
			<view class="qrbox">
				<view class="" style="padding-top: 72rpx;">
					<canvas canvas-id="qrcode" v-show="qrShow" style="width: 160px;height:160px;margin: 0 auto;" />
				</view>
				<view class="qrtitle">
					客服微信
				</view>
				<view class="" style="text-align: center;font-size: 32rpx; color: #727070;">
					~联系电话~
				</view>
				<view class="btn">
					18112217250
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js'
	export default {
		data() {
			return {
				pt: 0,
				tablist: ['用户客服', '商家客服'],
				curi: 0,
				qrShow: false,
			};
		},
		methods: {
			qrFun: function(text) {
				this.qrShow = true
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: text,
					size: 160,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {}
				})
			}
		},
		onLoad() {
			this.pt = uni.getSystemInfoSync().statusBarHeight + 44
			this.qrFun('18112217250')
		}
	}
</script>

<style lang="less">
	.page {
		min-height: 100vh;
		background: linear-gradient(180deg, #ff8214, #ff6503);
	}

	.title {
		width: 624rpx;
		height: 67rpx;
		margin: 30rpx 62rpx 42rpx;
	}

	.tabbox {
		line-height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0px 6rpx 21rpx 0px rgba(209, 102, 11, 0.32);
		border-radius: 50rpx;
		width: fit-content;
		font-size: 36rpx;
		margin-bottom: 55rpx;
		font-weight: bold;

		.tabitem {
			width: fit-content;
			padding: 0 60rpx;
			color: #FF6705;
		}

		.active2 {
			background: #FDA532;
			border-radius: 50rpx 50rpx 50rpx 0px;
			color: #fff;
		}

		.active1 {
			background: #FDA532;
			border-radius: 50rpx 50rpx 0px 50rpx;
			color: #fff;
		}

	}

	.qrbox {
		width: 626rpx;
		height: 798rpx;
		background: #FFFFFF;
		box-shadow: 0px 6rpx 21rpx 0px rgba(50, 153, 251, 0.32);
		border-radius: 25rpx;
		margin: 0 62rpx;
	}
	.qrtitle{
		font-size: 40rpx;
		color: #333333;
		font-weight: bold;
		text-align: center;
		margin-top: 40rpx;
		margin-bottom: 48rpx;
	}
	.btn{
		width: 372rpx;
		line-height: 116rpx;
		background: linear-gradient(164deg, #FF8717, #FF5F00);
		border-radius: 58rpx;
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
		font-weight: bold;
		margin-top: 28rpx;
		margin-left: 126rpx;
	}
</style>
